<template>
    <div>
        <!-- 轮播图 -->
        <div class="index-swiper">
            <swiper :options="swiperOption" v-if="swiperList.length">
                <swiper-slide v-for="item in swiperList" :key="item.id">
                    <router-link :to="item.url" tag="div">
                        <img class="swiper-img" :src="item.imgUrl" alt="" />
                        <p class="text">{{item.desc}}</p>
                    </router-link>
                </swiper-slide>
                <!-- <div class="swiper-pagination"  slot="pagination"></div> -->
            </swiper>
        </div>
        <!-- split -->
        <split></split>
        <!-- nav -->
        <div class="index-nav">
            <div class="index-nav-top">
                <router-link to="/info" class="index-icon1">
                    <img src="http://www.banmago.cn/qunyiguan/images/index-icon1.png" alt="" />
                </router-link>
                <!-- hotspot -->
                <a href="https://mp.weixin.qq.com/mp/homepage?__biz=MzU5MDAxMzMzNw%3D%3D&hid=1&sn=e8f8b405d38562068dc6cb1b6fb95118" class="index-icon1">
                    <img src="http://www.banmago.cn/qunyiguan/images/index-icon2.png" alt="" />
                </a>
                <!-- trends -->
                <router-link to="/trends" class="index-icon1">
                    <img src="http://www.banmago.cn/qunyiguan/images/index-icon3.png" alt="" />
                </router-link>
            </div>
            <!-- news -->
            <div class="index-nav-item1">
                <router-link to="/news" class="index-icon2">
                    <img src="http://www.banmago.cn/qunyiguan/images/index-icon4.png" alt="" />
                </router-link>
            </div>
            <div class="index-nav-item2">
                <router-link to="/anime" class="index-icon2">
                    <img src="http://www.banmago.cn/qunyiguan/images/index-icon5.png" alt="" />
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import Split from 'base/split/split.vue'

    export default {
        data() {
            return {
                swiperList: [],
                swiperOption: {
                    // pagination: '.swiper-pagination',
                    loop: true,
                    autoplay: 5000,
                    autoplayDisableOnInteraction : false
                }
            }
        },
        methods: {
            getSwiperInfo () {
                axios.get('/api/index.php?g=Api&m=Guanwang&a=swiper').then((res) => {
                    res = res.data
                    console.log(res)
                    this.swiperList = res.data.swiperList
                })
            }
        },
        components: {Split},
        created() {
            this.getSwiperInfo()
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'

    .index-swiper
        width: 100%
        height: 0
        height: 251px
        overflow: hidden
        position: relative
        background: #fff
        .swiper-img
            width: 100%
            height: 251px
        .text
            position: absolute
            height: 40px
            bottom: 0
            left: 0
            width: 100%
            line-height: 40px
            background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)))
            background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1))
            padding: 0 10px
            -webkit-box-sizing: border-box
            box-sizing: border-box
            color: #fff
            font-size: 16px
            ellipsis()
    .index-nav
        margin-top: 12px
        padding: 0 15px
        width: 100%
        box-sizing: border-box
        -webkit-box-sizing: border-box
        .index-nav-top
            width: 100%
            display: flex
            .index-icon1
                flex: 1
                width: 109px
                height: 109px
                text-align: center
                img
                    width: 109px
                    height: 109px
        .index-nav-item1,.index-nav-item2
            width: 100%
            display: flex
            .index-icon2
                flex: 1
                width: 100%
                height: 94px
                img
                    width: 100%
                    height: 94px
        .index-nav-item1
            margin-top: 15px
</style>